<template>
    <Card shadow>
        <Form ref="formCustom" :model="formCustom"  inline @keyup.enter.native="enterSubmit">
            <Row >
                <Col  :xs="6" :sm="8" :md="6" :lg="6">
                    <Input v-model="formCustom.keywords" placeholder="考生ID/真实姓名/身份证号"></Input>
                </Col>
                <Col :xs="6" :sm="8" :md="6" :lg="6" class="Refnum">
                    <Input type="text" v-model="formCustom.passwdCheck" placeholder="考场名称/试卷名称"></Input>
                </Col>
                <Col  :xs="6" :sm="6" :md="6" :lg="6">
                    <Row >
                        <Col :xs="10" :sm="8" :md="6" :lg="8">
                            <Select v-model="formCustom.status" placeholder="考试状态" clearable>
                                <Option value="1">正常</Option>
                                <Option value="0">缺考</Option>
                            </Select>
                        </Col>
                        <Col :xs="10" :sm="8" :md="6" :lg="8" class="qualified">
                            <Select v-model="formCustom.qualified1" placeholder="是否合格" clearable>
                                <Option value="合格">合格</Option>
                                <Option value="不合格">不合格</Option>
                            </Select>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Row >
                <Col :xs="8" :sm="8" :md="8" :lg="8">
                    <Row >
                    	<Col :xs="6" :sm="8" :md="8" :lg="6">
                            <label class="grade">分数区间：</label>
                        </Col>
                        <Col :xs="6" :sm="6" :md="6" :lg="6">
                            <Input type="text" v-model="formCustom.gradeGt"></Input>
                        </Col>                        
                        <Col :xs="6" :sm="6" :md="6" :lg="6" class="differentiate">
                            <Input type="text" v-model="formCustom.gradeLt"></Input>                            
                        </Col>
                    </Row>                
                </Col>
                <Col :xs="8" :sm="8" :md="8" :lg="4">
                    <Row >
                        <Col>
                            <DatePicker type="daterange" placement="bottom-end" @on-change='changeTime' placeholder="2018-06-18至2018-09-18" >
                            </DatePicker>
                        </Col>
                    </Row>
                </Col>
                <Col :xs="8" :sm="4" :md="6" :lg="4">
                    <Button type="primary"  @click="handleSubmit('formCustom')" class="seek">搜索</Button>
                </Col>
            </Row>
        </Form>
        <div class="menu">
            <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change='selectMore' ></Table>
            <Checkbox
	           @on-change="handleSelectAll()">全选
		    </Checkbox>
		    <Button @click="exportData">导出数据</Button>
		    <div class="paging">		    	
			    <template>
				    <Page :total="pageTotal" show-total show-elevator @on-change='jumpPage' :current="currentPage" :page-size='10'></Page>
				</template>
		    </div>
        </div>
    </Card>
</template>
<script>
import {router} from "@/router/index.js";
import util from '@/libs/util.js';
import Vue from 'vue';
	var $vue=new Vue();
    export default {
        data () {
            return {
            	amount:'0',
            	beginTime:'',
				finishTime:'',
//               总共条数，为了分页
			    pageTotal:1,
			    currentPage:1,
			    staff:[],
			    something:[],
			    columns:[],
                formCustom: {
                    passwdCheck: '',
                    status:'',
                    qualified1:'',
                    keywords:'',
                    gradeLt:'',
                    gradeGt:''
                },
                columns4: [
                    {
                        type: 'selection',
                        width: 80,
                        align: 'center'
                    },
                    {
                    	title:'ID',
                    	key:'Id',
                        align: 'center'
                    },
                    {
                        title: '名字',
                        key: 'name',
                        align: 'center'
                    },
                    {
                    	title:'身份证号',
                    	key:'idcard',
                    	align: 'center',
	                    render:(h,params)=>{
	                        var num=params.row.idcard;
	                        return h('div',num=num.slice(0,3)+'****'+num.slice(num.length-4,))
	                    }
                    },
                    {
                    	title:'考场名称',
                    	align: 'center',
                    	key:'eRoomName'
                    },
                    {
                    	title:'试卷名称',
                        align: 'center',
                    	key:'testPaperName'
                    },
                    {
                    	title:'考试状态',
                    	key:'testStatus',
                        align: 'center',
                    	render:function(h,params){
                    		return h('div',
                    			params.row.testStatus=='1'?'正常':'缺考'
                    		)
                    	}
                    },
                    {
                    	title:'考试分数',
                    	key:'grade',
                        align: 'center'
                    },
                    {
                    	title:'是否合格',
                    	key:'isQualified',
                        align: 'center'
                    },
                    {
                        title: '开考时间',
                        key: 'KaiKaoTime',
                        align: 'center',
                        width:180,
                       render:function(h,params){                       		
		                	return h('div',util.timestampToTime(params.row.examStartTime)+"~"+util.timestampToTime(params.row.examEndTime))
		                }
                    },
                    {
                    	title:'操作',
                    	key:'operate',
                    	align:'center',
                    	width:120,
                    	render:function(h, params){

                    		return h('div',[
                    			h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'ios-paper-outline'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            router.push({
												name:"examination-particulars",
												query :{
		    										id:params.row.academicRecordsId,
		    										KaiKaoTime:parent.row.examStartTime,
		    										KaiKaoTime:parent.row.examEndTime
		    									}
                                            })
                                        }
                                    }
                                }, '考试详情')
                    		])
                    	}
                    }
                ],
                data1: [

                ],
                checkAll:false
            }
        },
        watch:{
    	//监听路由    	
			'$route':function(){
			        this.loadData();
			        this.handleSelectAll()
			    }
		},
		created:function(){
			this.loadData();
	    },
        methods: {            
            handleSelectAll() {
			this.checkAll=!this.checkAll
			this.$refs.selection.selectAll(this.checkAll);
	       },
	        //获取checkbox选中条数
			selectedNum:function(page){
				var that=this;
			    that.selectedAllList=[];
			    that.selectedAllNum=[];
			    that.selectedAllList=page;
				page.forEach(function(page){
					that.selectedAllNum.push(page.Id)	
				})
			},
			//      时间
	        changeTime:function(time){
	         	this.beginTime=util.timeToTimestamp(time[0]);
	         	this.finishTime=util.timeToTimestamp(time[1]);
	        },
			//表单提交搜索
			handleSubmit() {
		        this.loadData()
		   	},
		    //表单提交搜索——回车触发
	        enterSubmit:function(){
	            this.loadData()
	        },
			selectMore(num){
				var selectobj={};
				this.something=[];
		    	num.forEach((v,index)=>{
		    		selectobj={Id:v.Id,name:v.name,idcard:v.idcard,eRoomName:v.eRoomName,testPaperName:v.testPaperName,status:v.status=='1'?'正常':'缺考',grade:v.grade,isQualified:v.isQualified,KaiKaoTime:util.timestampToTime(v.examStartTime)+'~'+util.timestampToTime(v.examEndTime)}
		    		this.something.push(selectobj)
		    	})
		    },
			 //获取当前列表的数据
			loadData:function(){
		       	var that=this;
		       	var isQualified=(that.formCustom.qualified1==''||that.formCustom.qualified1==undefined)?'':("&isQualified="+that.formCustom.qualified1);
	            var Keywords=(that.formCustom.keywords==''||that.formCustom.keywords==undefined)?'':("&keywords="+that.formCustom.keywords);
	            var eRoomId=(that.formCustom.Id==''||that.formCustom.Id==undefined)?'':("&Id="+that.formCustom.Id);
	            var Keywords2=(that.formCustom.passwdCheck==''||that.formCustom.passwdCheck==undefined)?'':("&keywords2="+that.formCustom.passwdCheck);
	            var testStatus=(that.formCustom.status==''||that.formCustom.status==undefined)?'':("&testStatus="+that.formCustom.status);
	            var gradeGt=(that.formCustom.gradeGt==''||that.formCustom.gradeGt==undefined)?'':("&gradeGt="+that.formCustom.gradeGt);
	            var beginTime=that.beginTime==""?'':('&beginTime='+that.beginTime);
        		var finishTime=that.finishTime==""?'':('&finishTime='+that.finishTime);
	            var KaiKaoTime=(that.formCustom.KaiKaoTime==''||that.formCustom.KaiKaoTime==undefined)?'':("&KaiKaoTime="+that.formCustom.KaiKaoTime);
	            var gradeLt=(that.formCustom.gradeLt==''||that.formCustom.gradeLt==undefined)?'':("&gradeLt="+that.formCustom.gradeLt);
		    	this.axios({
		    		method:'get',
		    		url:that.$store.state.app.globalUrl+'/admin/AcademicRecords/index?size=10&page='+that.currentPage+Keywords2+Keywords+gradeGt+gradeLt+testStatus+isQualified+eRoomId+KaiKaoTime+finishTime+beginTime,
		    	}).then(function(res){
					that.data1=res.data.data.list;
	                that.pageTotal=parseInt(res.data.data.count);
		    	});
	       	},
			// 分页
	        jumpPage:function(page){
	        	this.currentPage=page;
	            this.loadData();
	        },
	        //导出数据
	        exportData:function(){
	        	var columns0=this.columns4.slice(0,-1)
	        	this.columns=columns0
	        	this.columns=this.columns.slice(1);
				if(this.something.length==0){
					this.$Message.success('请选择导出的数据');
				}else{
			         this.$refs.selection.exportCsv({
		                filename: 'Custom data',
		                columns: this.columns,
		                data: this.something		                
		            });
		      	}			
           }
        }
    }
</script>
<style type="text/css" scoped>
.ivu-table-wrapper{
	margin-bottom: 10px;
}
.ivu-row{
	margin-bottom: 10px;
}
.grade{
	text-align: center;
	line-height: 30px;
}
.menu{
	overflow: hidden;
}
.menu Table{
}
.menu .paging{
	float: right;
}
.ivu-icon{
	font-size: 25px;
}
.Refnum{
	margin: 0px 10px;
}
.qualified{
	margin-left: 10px;
}
.differentiate{
	margin-left: 10px;
}
@media (min-width: 768px) {
	.seek{
		margin-left: 15px;
	}
}
</style>